<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Socket.io Test</h1>

消息ID <input id="messageId" type="text">
<br>
<br>
<textarea id="body" cols="50" rows="5" placeholder="body">["{'id':'1212','msg':'233'}","sdfsdf"]</textarea>
<div><p id="status">Waiting for input</p></div>
<div><p id="message">hello world!</p></div>
<button id="connect" onClick='connect()'/>Connect</button>
<button id="disconnect" onClick='disconnect()'>Disconnect</button>
<button id="send" onClick='send()'/>Send Message</button>

<hr>


<button id="back" onClick='back()'/>确认收到信息</button>

<!-- 引入远程socket.io.js -->
<script src="socket.io.js"></script>

<script>

    /**
     * 前端js的 socket.emit("事件名","参数数据")方法，是触发后端自定义消息事件的时候使用的,
     * 前端js的 socket.on("事件名",匿名函数(服务器向客户端发送的数据))为监听服务器端的事件
     **/
    // var socket = io.connect("http://10.168.5.153?token=3&groupIds=1",{'force new connection':true, 'reconnect': true });
    var socket = io.connect("http://localhost:20201?token=3&groupIds=1",{'force new connection':true, 'reconnect': true });
    var firstconnect = false;

    function connect() {
        if(firstconnect) {

            // socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
            //socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in "
            //+ nextRetry + " seconds"); });
            //socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
            //firstconnect = false;
        } else {
            socket.connect();
        }
    }

    //监听服务器连接事件
    socket.on('connect', function(client){
        status_update("Connected to Server"); });

    socket.on('connect_error', function (err) {
        console.log(err);
        socket.disconnect()
    });

    //监听服务器关闭服务事件
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    //监听服务器端发送消息事件
    socket.on('message', function(data) {
        message(data)
        //console.log("服务器发送的消息是："+data);
    });

    socket.on('error', function(data){
        message(data)
    });

    //断开连接
    function disconnect() {
        socket.disconnect();
    }

    function message(data) {
    debugger;
    
        document.getElementById('message').innerHTML = "Server says: " + data.body[0];
    }

    function status_update(txt){
        document.getElementById('status').innerHTML = txt;
    }

    function esc(msg){
        return msg.replace(/</g, '<').replace(/>/g, '>');
    }



    //点击发送消息触发
    function send() {
        //console.log("点击了发送消息，开始向服务器发送消息")

        var obj = new Object();
        obj.id = document.getElementById('messageId').value;
        obj.to = ["3"];
        obj.type = "message";
        obj.body = [document.getElementById("body").value];
        obj.groupId = ["1"];
        obj.sort = "0";
        socket.emit('message', obj);
    };

    function back() {
        var obj = new Object();
        obj.id = document.getElementById('messageId').value;
        socket.emit('receipt_message', obj);
    }
</script>

</body>
</html>
